﻿<MCard
    Class="mx-auto"
    MaxWidth="400">
    <MCardTitle>
        <h2 class="text-h4">
            Shirt Blouse
        </h2>
        <MSpacer></MSpacer>
        <span class="text-h6">$44.50</span>
    </MCardTitle>

    <MCardText>
        Our blouses are available in 8 colors. You can custom order a built-in arch support for any of the models.
    </MCardText>

    <MDivider Class="mx-4"></MDivider>

    <MCardText>
        <span class="subheading">Select size</span>

        <MChipGroup
            @bind-Value="selection"
            ActiveClass="deep-purple--text text--accent-4"
            Mandatory>
            @foreach (var size in sizes)
            {
                <MChip @key="size" Value="size">
                    @size
                </MChip>
            }
        </MChipGroup>
    </MCardText>

    <MCardActions>
        <MButton
            Block
            Class="white--text"
            Color="deep-purple accent-4">
            Add to Cart
        </MButton>
    </MCardActions>
</MCard>

@code {

    StringNumber selection = "08";

    List<string> sizes = new() {"04", "06", "08", "10", "12", "14"};

}